<script setup lang="ts">
import { computed } from 'vue';
import dayjs from 'dayjs';
import runData from '@/components/ECharts/runData/index.vue';
import { MapData } from '@/types/MapData';
import deviceRecording from '@/components/deviceRecording/index.vue';
import videoComManagement from '@/components/videoComManagement/index.vue';
import { defaultImage } from '@/utils/defaultImage';
import empty from '@/assets/icons/svg/empty-box.svg';

const props = defineProps<{
  mapData: MapData;
  id: string | number;
  someDay: number | string;
}>();
const deviceRecordingRef = ref();
const timePeriod = computed(() => {
  const current = dayjs().format('YYYY-MM-DD');
  const nDay = dayjs()
    .subtract(Number(props.someDay) - 1, 'day')
    .format('YYYY-MM-DD');
  return `${nDay}至${current}`;
});
const ReportHandle = () => {
  deviceRecordingRef.value.open();
};
// 判断是否显示echarts
const isShowECharts = computed(() => {
  return props.mapData.data && props.mapData.data.data && props.mapData.data.seriesList;
});
//格式化经纬度
const formattedNumber = computed(() => {
  const lat = props.mapData.info.latitude;
  const lng = props.mapData.info.longitude;
  return `${lng},${lat}`;
});
// 处理设备状态
const sensorStatus = computed(() => {
  return props.mapData.info.sensorStatus === '在线' ? '#43ff8b' : '#ff0000';
});
//处理category字符串按照空格分割成数组 然后在渲染在模板上
const category = computed(() => {
  return props.mapData.info.category.split(' ');
});
//判断是否显示视频监控
const isShowVideo = computed(() => {
  return props.mapData.info.equipmentClassify == '2' || props.mapData.info.equipmentClassify == '3' || props.mapData.info.equipmentClassify == '25';
});
//切换按钮状态
const ToggleButtonName = ref('视频监控');
//点击视频监控 运行数据切换
const handleChange = () => {
  if (ToggleButtonName.value === '视频监控') {
    ToggleButtonName.value = '运行数据';
  } else {
    ToggleButtonName.value = '视频监控';
  }
};
//给特定的设备添加默认图片
const getDefaultImage = (type: string | number) => {
  return defaultImage[type] ? defaultImage[type] : false;
};
</script>

<template>
  <div class="card-box">
    <el-row>
      <el-tag style="margin-left: 4px" size="small" v-for="item in category" :key="item" effect="dark">
        {{ item }}
      </el-tag>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="16">
        <el-descriptions :column="2" class="largeScreen-descriptions">
          <el-descriptions-item label="设备状态">
            <span :style="{ 'color': sensorStatus }">
              {{ mapData.info.sensorStatus }}
            </span>
          </el-descriptions-item>
          <el-descriptions-item label="设备编号">{{ mapData.info.code }}</el-descriptions-item>
          <el-descriptions-item label="应用场景">{{ mapData.info.monitorScenceName }}</el-descriptions-item>
          <el-descriptions-item label="安装位置">{{ mapData.info.instPos }}</el-descriptions-item>
          <el-descriptions-item label="经纬度">{{ formattedNumber }}</el-descriptions-item>
          <el-descriptions-item label="采集频次">{{ mapData.info.frequency }}</el-descriptions-item>
          <el-descriptions-item label="所属企业" v-if="mapData.info.equipmentClassify == '9'">
            {{ mapData.info.comName }}
          </el-descriptions-item>
          <el-descriptions-item label="窨井类型" v-if="mapData.info.wallType">{{ mapData.info.wallType }} </el-descriptions-item>
          <el-descriptions-item label="详细位置" v-if="mapData.info.equipmentClassify == '18'">{{ mapData.info.detailPos }} </el-descriptions-item>
        </el-descriptions>
      </el-col>
      <el-col :span="8">
        <el-carousel height="150px" indicator-position="outside" v-if="mapData.info.imgUrls">
          <el-carousel-item v-for="item in mapData.info.imgUrls" :key="item">
            <el-image preview-teleported :src="item" :preview-src-list="mapData.info.imgUrls" :initial-index="0" fit="cover" />
          </el-carousel-item>
        </el-carousel>
        <el-carousel height="150px" indicator-position="outside" v-else-if="getDefaultImage(mapData.info.equipmentClassify)">
          <el-carousel-item>
            <el-image
              :src="getDefaultImage(mapData.info.equipmentClassify)"
              :preview-src-list="[getDefaultImage(mapData.info.equipmentClassify)]"
              :initial-index="0"
              preview-teleported
              fit="cover"
            />
          </el-carousel-item>
        </el-carousel>
        <el-empty v-else :image="empty" description="暂无图片" class="largeScreen-empty" style="height: 150px" />
      </el-col>
    </el-row>

    <el-row :gutter="10">
      <el-col :span="24">
        <div class="title">
          <el-row :gutter="10">
            <el-col :span="16" class="time-period">
              <span>近{{ someDay }}天运行数据({{ timePeriod }})</span>
            </el-col>
            <el-col :span="4" class="escalate-records" v-if="isShowVideo">
              <span @click="handleChange">{{ ToggleButtonName }}</span>
            </el-col>
            <el-col :span="4" class="escalate-records">
              <span @click="ReportHandle">上报记录</span>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="24" v-if="!isShowVideo">
        <div class="chart-box">
          <runData v-if="isShowECharts" :echartsData="mapData.data" :deviceInfo="mapData.info" />
          <el-empty v-else :image="empty" description="暂无数据" class="largeScreen-empty" />
        </div>
      </el-col>
      <!--      这个是带监控的那些模板-->
      <el-col :span="24" v-else>
        <div class="chart-box" v-if="ToggleButtonName === '视频监控'">
          <runData v-if="isShowECharts" :echartsData="mapData.data" />
          <el-empty v-else :image="empty" description="暂无数据" class="largeScreen-empty" />
        </div>
        <div class="chart-box" v-else>
          <videoComManagement
            id="equipmentVideo"
            :camera-index-code="mapData.info.videMonitoring.info.data.code"
            :value="mapData.info.videMonitoring.info.url"
            :video-type="mapData.info.videMonitoring.type"
          />
        </div>
      </el-col>
    </el-row>
    <deviceRecording ref="deviceRecordingRef" :info="mapData.info" />
  </div>
</template>

<style scoped lang="scss">
.card-box {
  min-width: 600px;
  min-height: 200px;

  .title {
    background: url('@/assets/largescreen/title-pic.png') no-repeat center center;
    background-size: cover;
    width: 100%;
    height: 61px;
    line-height: 61px;
    padding-left: 20px;

    .time-period {
      color: white;
      font-family: PangMenZhengDao;
      font-size: 18px;
    }

    .escalate-records {
      color: #0be4f1;
      font-family: PangMenZhengDao;
      font-size: 18px;
      text-align: right;
      cursor: pointer;

      &:hover {
        text-decoration: underline;
      }
    }
  }

  .chart-box {
    width: 100%;
    height: 250px;
  }

  .capacity-box {
    width: 100%;
    height: 50px;
    border: 2px dashed #ccc;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .capacity-value {
      font-weight: 700;
      font-size: 16px;
      color: #00ffff;
    }

    .capacity-title {
      font-size: 12px;
      color: #fff;
      opacity: 0.8;
    }
  }

  .empty-box {
    width: 100%;
    height: 50px;
    color: #0be4f1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
}
</style>
